<template>
  <div class="list_box">
    <div class="header_view">
      <div class="lang_box"><lang /></div>

      <div class="list_main">
        <div class="title_view"><title-com /></div>
        <div class="search_view"><Search @getBookList="handlerSearch" /></div>
      </div>
    </div>

    <div class="container data_list_box" v-if="!showMnStyle">
      <div class="list_header_box">
        <div class="back_btn" @click="backHomePage()">
          <div class="back_icon_box">
            <img src="../assets/icon-back-full.svg" alt="">
          </div>
          首页
        </div>
        <div class="result"> 共搜索出 <span class="mainColor fw-600">{{ total }}</span> 本</div>
      </div>

      <div class="book_list" v-if="bookList && bookList.length">
        <div class="book_item pv_10" v-for="(item, index) in bookList" :key="index">
          <div class="img_box" >
            <img :src="bookList[index].img || def_book" alt="" @click="goToBookDetal(index)">
          </div>
          <div class="text_box" @click="goToBookDetal(index)">
            <div class="zh_title w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">书名:</span>《{{ item.title }}》</div>
            <div class="author w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">作者:</span>{{ item.authors }}</div>
            <div class="publisher w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">出版社:</span>{{ item.publisher }}</div>
            <div class="published w_100 min_w_300 ellipsis"><span class="mainColor fw_600 pr_10">出版日期:</span>{{ item.published }}</div>
          </div>

          <!-- 浏览按钮 -->
          <el-button class="btn" type="default" @click="goToBookDetal(index)">阅读</el-button>
        </div>
      </div>

      <div v-if="isShow" class="loading_box">
        <div class="loading">
          <spinner />
        </div>
      </div>
    </div>

    <!-- 蒙文样式 -->
    <div class="data_list_box_mn container" v-else>
      <div class="result_filter">
        <div class="back_btn" @click="backHomePage()">
          <div class="back_icon_box">
            <img src="../assets/icon-back.svg" alt="">
          </div>
          <span class="back_text">ᠲᠡᠷᠢᠭᠦᠨ ᠨᠢᠭᠤᠷ</span>
        </div>
        <div class="result">
          ᠨᠡᠢᠲᠡ&nbsp;<span class="mainColor number">{{ total }}</span> &nbsp;ᠨᠤᠮ
        </div>
      </div>

      <div class="book_list" v-if="bookList && bookList.length">
        <div class="book_item" v-for="(item, index) in bookList" :key="index">
          <div class="img_box">
            <img class="img_full" :src="item.images|| def_book" alt="" @click="goToDetail(index)">
          </div>
          <div class="text_box">
            <div class="mn_title fs_22">
              <span class="mainColor fw_600 pr_10">ᠨᠣᠮ᠎ᠤᠨ ᠨᠡᠷ᠎ᠡ : </span>
               {{ formatTitle(item.monbook.title) }} 
            </div>
            <div class="author fs_20">
              <span class="mainColor fw_600 pr_10">ᠵᠣᠬᠢᠶᠠᠭᠴᠢ : </span>
              {{ formatTitle(item.monbook.author) }}
            </div>
            <div class="publisher fs_20 ellipsis">
              <span class="mainColor fw_600 pr_10">ᠬᠡᠪᠯᠡᠯ᠎ᠦᠨ ᠬᠣᠷᠢᠶ᠎ᠠ : </span>
              <span v-if="item.monbook.publisher == 0">ᠲᠣᠳᠣ ᠦᠭᠡᠢ</span>
              <span v-else> {{ formatTitle(item.monbook.publisher) }} </span>
            </div>
            <div class="published fs_20 ellipsis">
              <span class="mainColor fw_600 pr_10">ᠬᠡᠪᠯᠡᠭᠰᠡᠨ ᠡᠳᠦᠷ ᠬᠤᠭᠤᠴᠠᠭ᠎ᠠ : </span>
              {{ (item.published).replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ') }}
            </div>
          </div>

          <div class="btn_box">
            <el-button class="read_btn" type="default" @click="goToDetail(index)">ᠤᠩᠱᠢᠬᠤ</el-button>
          </div>
        </div>
      </div>

      <div v-if="isShow" class="loading_box">
        <div class="loading">
          <spinner />
        </div>
      </div>

      <!-- <div class="pagenation">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="20"
          font-size="20px !important"
          @current-change="handlerChangeCurrentPage"
          @prev-click="handlerPrevClick"
          @next-click="handlerNextClick"
        >
        </el-pagination>
      </div> -->
    </div>

    <!-- 中文分页 -->
    <div class="pagenation">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        font-size="30px !important"
        @current-change="handlerChangeCurrentPage"
        @prev-click="handlerPrevClick"
        @next-click="handlerNextClick">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
  // import { baseURL } from "@/const";
  // import {  } from '../config/api'
  import lang from '../components/lang.vue';
  import TitleCom from '../components/title.vue';
  import Search from '../components/search.vue';
  import Spinner from 'vue-simple-spinner'

  export default {
    name: "BookList",
    components: { lang, TitleCom, Search, Spinner },
    data() {
      return {
        options: [
          { value: '0', label: '全部' },
          { value: '1', label: '汉文书籍' },
          { value: '2', label: '蒙文书籍' }
        ],
        value: '全部',
        total: 0,
        pageTotal: 0,
        bookList: [],
        def_book: require('../assets/def-book.png'),

        currentPage: 1,

        timer: null,
        isShow: false,

        activeListIndex: null,
        showMnStyle: false
      }
    },

    computed: {
      getStateActiveIndex() {
        this.activeListIndex = this.$store.state.activeIndex
      },
      getStateMnStyle() {
        this.showMnStyle = this.$store.state.isShowMnStyle
      },
    },

    created() {
      this.getStateActiveIndex
      this.getStateMnStyle
    },

    mounted(){
      this.getBookList()
    },

    methods: {
      // 返回首页
      backHomePage() {
        this.$router.push('/')
      },

      // 筛选数据
      handlerFilterData(e) {
        if (e == 0) {
          this.filter
        }
      },

      // 获取数据
      async getBookList() {
        this.getStateMnStyle
        this.bookList = []
        this.total = 0
        let that = this
        let query = this.$route.query
        let res = null
        this.isShow = true

        // 判断 响应数据
        this.timer = setTimeout(() => {
          that.$message('求情失败，服务器发生错误！');
          that.isShow = false
        }, 3000)

        // ---------- local ----------
        if (this.activeListIndex == 1) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?search=${query.search}&limit=20&is_mon=${query.isMon}`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?isbn=${query.isbn}&limit=20&is_mon=${query.isMon}`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?authors=${query.authors}&limit=20&is_mon=${query.isMon}`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`api/bookrec/api/v1/books/?publisher=${query.publisher}&limit=20&is_mon=${query.isMon}`)
        }

        // --------- server ---------
        // if (this.activeListIndex == 1) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&limit=20&is_mon=${query.isMon}`)
        // } else if (this.activeListIndex == 2) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?isbn=${query.isbn}&limit=20&is_mon=${query.isMon}`)
        // } else if (this.activeListIndex == 3) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?authors=${query.authors}&limit=20&is_mon=${query.isMon}`)
        // } else if (this.activeListIndex == 4) {
        //   res = await this.axios.get(`/bookrec/api/v1/books/?publisher=${query.publisher}&limit=20&is_mon=${query.isMon}`)
        // }

        let results = res.data.data.results

        if (res.data.code == 200) {
          clearTimeout(that.timer)
          this.isShow = false

          if (!results.length) {
            this.$message('暂无该类图书信息！');
            return false
          }

          that.bookList = results
          that.total = res.data.data.count
        }
      },

      // 监听搜索
      handlerSearch(query) {
        let newUrl = null
        this.getStateActiveIndex

        // ---------- local ---------
        if (this.activeListIndex == 1) {
          newUrl = this.$route.path + `?search=${query.search}`
        } else if (this.activeListIndex == 2) {
          newUrl = this.$route.path + `?isbn=${query.isbn}`
        } else if (this.activeListIndex == 3) {
          newUrl = this.$route.path + `?authors=${query.authors}`
        } else if (this.activeListIndex == 4) {
          newUrl = this.$route.path + `?publisher=${query.publisher}`
        }

        // ---------- server ---------
        // if (this.activeListIndex == 1) {
        //   newUrl = 'http://10.60.63.131/lib/zh/#/' + `?search=${query.search}`
        // } else if (this.activeListIndex == 2) {
        //   newUrl = 'http://10.60.63.131/lib/zh/#/' + `?isbn=${query.isbn}`
        // } else if (this.activeListIndex == 3) {
        //   newUrl = 'http://10.60.63.131/lib/zh/#/' + `?authors=${query.authors}`
        // } else if (this.activeListIndex == 4) {
        //   newUrl = 'http://10.60.63.131/lib/zh#/' + `?publisher=${query.publisher}`
        // }

        window.history.replaceState('', '', newUrl)      
        this.getBookList()
      },

      // 跳转到 【图书详情页】
      goToBookDetal(index) {
        this.$router.push({
          path: '/book-detail',
          query: {
            id: this.bookList[index].id
          }
        })
      },

      // 前往蒙文详情
      goToDetail(index) {
        this.$router.push({
          path: '/book-detail-mn',
          query: {
            id: this.bookList[index].id
          }
        })
      },

       // 格式化 title
       formatTitle(val) {
        let arr = []
        let value = val.replace(/\u202f/g, '\u180e').replace(/\u180B/g, '').replace(/\u200c/g, '').replace(/\u200D/g, ' ')

        // 将 内容中的 标点符号 替换为 " "
        let str = value.replace(/[|\《|\》|\·|\(|\)|\︔|\᠄|\᠂|\<|\᠃|\︖]/g, "");
        // 将 内容 转换为 数组 ， 每一个 蒙文字 是一个 元素

        for (let i of str) {
          if (i === " ") {
            arr = str.split(" ")
          }
        }

        if (arr.length == 0 && str.length !== 0) {
          return str
        }

        if ( arr.length > 0 ) {
          return arr.slice(0, 6).join(' ')
        }
      },

      // 分页
      async handlerChangeCurrentPage(e) {
        this.currentPage = e
        let that = this
        this.isShow = true
        let query = this.$route.query
        this.bookList = []

        let res = null

        // if (this.activeListIndex == 1) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        // } else if (this.activeListIndex == 2) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?isbn=${query.isbn}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        // } else if (this.activeListIndex == 3) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?authors=${query.authors}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        // } else if (this.activeListIndex == 4) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?publisher=${query.publisher}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        // }

        if (this.activeListIndex == 1) {
          res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`/bookrec/api/v1/books/?isbn=${query.isbn}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`/bookrec/api/v1/books/?authors=${query.authors}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`/bookrec/api/v1/books/?publisher=${query.publisher}&is_mon=${query.isMon}&limit=20&offset=${e - 1}0`)
        }

        if (res.data.code == 200) {
          setTimeout(() => {
            this.isShow = false
            that.bookList = res.data.data.results
          }, 500)
        }
      },

      // 上一个
      async handlerPrevClick() {
        let currentPage = this.currentPage --
        this.isShow = true
        let that = this
        let query = this.$route.query
        this.bookList = []

        let res = null

        // if (this.activeListIndex == 1) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // } else if (this.activeListIndex == 2) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?isbn=${query.isbn}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // } else if (this.activeListIndex == 3) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?authors=${query.authors}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // } else if (this.activeListIndex == 4) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?publisher=${query.publisher}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // }

        if (this.activeListIndex == 1) {
          res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`/bookrec/api/v1/books/?isbn=${query.isbn}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`/bookrec/api/v1/books/?authors=${query.authors}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`/bookrec/api/v1/books/?publisher=${query.publisher}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        }

        if (res.data.code == 200) {
          setTimeout(() => {
            this.isShow = false
            that.bookList = res.data.data.results
          }, 500)
        }
      },    

      // 下一个
      async handlerNextClick() {
        let currentPage = this.currentPage ++
        this.isShow = true
        let that = this
        let query = this.$route.query
        this.bookList = []

        // this.getStateActiveIndex

        let res = null

        // if (this.activeListIndex == 1) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // } else if (this.activeListIndex == 2) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?isbn=${query.isbn}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // } else if (this.activeListIndex == 3) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?authors=${query.authors}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // } else if (this.activeListIndex == 4) {
        //   res = await this.axios.get(`pro/bookrec/api/v1/books/?publisher=${query.publisher}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        // }

        if (this.activeListIndex == 1) {
          res = await this.axios.get(`/bookrec/api/v1/books/?search=${query.search}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 2) {
          res = await this.axios.get(`/bookrec/api/v1/books/?isbn=${query.isbn}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 3) {
          res = await this.axios.get(`/bookrec/api/v1/books/?authors=${query.authors}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        } else if (this.activeListIndex == 4) {
          res = await this.axios.get(`/bookrec/api/v1/books/?publisher=${query.publisher}&is_mon=${query.isMon}&limit=20&offset=${currentPage - 1}0`)
        }

        if (res.data.code == 200) {
          setTimeout(() => {
            this.isShow = false
            that.bookList = res.data.data.results
          }, 500)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .list_box {
    width: 100%;
    height: 100vh;
    position: relative;

    .header_view {
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      position: sticky;
      top: 0;
      background-color: #fff !important;
      z-index: 99;
      .lang_box {
        width: 100%;
      }

      .list_main {
        width: 100%;
        position: relative;

        .title_view {
          width: 100%;
          position: absolute;
          top: 40px;
          left: 0;
        }

        .search_view {
          position: absolute;
          top: 100px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }  
  
  // 中文样式
  .data_list_box {
    width: 100%;
    height: calc(100% - 260px);
    overflow-y: scroll;
    position: relative;

    .list_header_box {
      width: 100%;
      height: 45px;
      line-height: 40px;
      position: sticky;
      top: 0;
      z-index: 99;
      background-color: #fff;

      .back_btn {
        width: 75px;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        margin-left: 8px;
        color: #fff;
        background-color: #74a5ff;
        margin-top: 10px;
        border-radius: 5px;
        float: left;
        position: relative;

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        .back_icon_box { 
          width: 25px; 
          height: 30px;
          // background-color: #fff;

          img { width: 100%; height: 100%; }
        }
      }
      &:hover { 
        cursor: pointer; 
      }
      .result { 
        margin-left: 20px;
        float: left;
        padding: 5px 0 0 0;
      }

      .filter_box {
        width: 100px;
        float: right;
      }
    }

    .book_list {
      width: 100%;
      .book_item {
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #ccc;
        position: relative;

        .img_box { 
          float: left;

          img { width: 100%; height: 100%; }
        }
        .img_box:hover {
          cursor: pointer;
        }

        .text_box {
          width: calc(100% - 110px);
          height: 120px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          // align-items: center;
          float: left;
          padding-left: 20px;
          .zh_title {
            width: 100%;
          }
          .author {
            width: 100%;
          }
        }

        .btn {
          position: absolute;
          right: 20px;
          bottom: 20px;
          border: 1px solid #ccc;
          color: #ccc;
        }
        .btn:hover {
          border: 1px solid #74a5ff;
          color: #74a5ff;
        }
      }
    }

    .loading_box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      .loading {
        font-size: 100px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0);
      }
    }
  }

  // 蒙文样式
  .data_list_box_mn {
    margin-top: 20px;
    position: relative;
    // border: 1px solid red;
    overflow: hidden;

    .result_filter {
      width: 50px;
      height: 700px;
      position: relative;
      margin-left: 10px;
      // border: 1px solid #000;

      .back_btn {
        width: 40px;
        margin-left: 5px;
        margin-top: 10px;
        border: 1px solid #74a5ff;
        border-radius: 5px;
        text-align: center;
        .back_icon_box {
          width: 30px;
          height: 30px;
          img { width: 100%; height: 100%; }
        }
        .back_text {
          font-size: 20px;
          writing-mode: vertical-lr;
          font-family: "gltTing";
          color: #74a5ff;
        }
      }
      &:hover { cursor: pointer; }

      .result {
        width: 40px;
        // height: 400px;
        margin-top: 10px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        font-size: 26px;
        writing-mode: vertical-lr;
        font-family: "gltTing";
        // border: 1px solid #000;


        .number {
          font-size: 18px;
          transform-origin: 20 0;
          transform: rotate(-90deg);
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
        }
      }
    }  

    .book_list {
      width: calc(100% - 120px);
      height: 660px;
      overflow: auto;
      
      display: flex;
      flex-direction: row;
      justify-content:flex-start;

      position: absolute;
      top: 0;
      left: 80px;

      .book_item {
        height: 100%;
        padding: 10px;
        float: left;
        position: relative;
        // border-left: 1px solid #ccc;
      
        .img_box { 
          width: 100px;
          height: 120px;
        }
        .img_box:hover { cursor: pointer; }

        .text_box {
          width: 100%;
          height: 500px;
          padding-top: 5px;

          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .mn_title, .author, .publisher, .published {
            width: 25px;
            height: 80%;
            writing-mode: vertical-lr;
            font-family: "gltTig";
            font-size: 18px;
          }
        }
        .btn_box {
          position: absolute;
          left: 50%;
          bottom: 20px;
          transform: translateX(-50%);

          .read_btn {
            width: 80px;
            height: 50px;
            border: 1px solid #ccc;
            color: #ccc;

            // transform-origin: 0 0;
            transform: rotate(90deg);
          
            font-family: "gltTig";
          }

          .read_btn:hover {
            cursor: pointer;
            border: 1px solid #74a5ff !important;
            background-color: #fff;
            color: #74a5ff !important;
          }
        }
      }
    }

    .loading_box {
      width: 100%;
      height: 600px;
      position: absolute;
      top: 0;
      left: 0;
      .loading {
        font-size: 100px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0);
      }
    }
  }

  .pagenation {
    width: 60%;
    // margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    position: fixed;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    background-color: #fff;
  }
}

  @media screen and (min-width: 1600px) {
    .header_view { height: 182px; }
    .result { font-size: 22px; } 
    .img_box { width: 110px; height: 120px; }
            
    .zh_title, .author, .publisher, .published { font-size: 18px; }

  }  

  @media screen and (min-width: 1200px) and (max-width: 1599px) {
    .header_view { height: 182px; }
    .result { font-size: 18px; } 
    .img_box { width: 110px; height: 120px; }
            
    .zh_title, .author, .publisher, .published { font-size: 16px; }
  }

  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .header_view { height: 180px; }
    .result { font-size: 18px; } 
    .img_box { width: 110px; height: 120px; }
            
    .zh_title, .author, .publisher, .published { font-size: 16px; }
  }

  @media screen and (min-width: 768px) and (max-width: 992px)  {
    .header_view { height: 179px; }
    .result { font-size: 18px; } 
    .img_box { width: 110px; height: 120px; }
            
    .zh_title, .author, .publisher, .published { font-size: 16px; }
  }

</style>

<style>
  .data_list_box::-webkit-scrollbar {
    width: 2px;
    height: 100%;
    background-color: #f5f5f5;
  }
  .data_list_box::-webkit-scrollbar-thumb {       
    border-radius: 10px;
    background: #74a5ff;
  }

  .el-pager > li{
    font-size: 14px;
  }
  .el-pager > li:not(.disabled).active {
    background-color: #74a5ff !important;
  }

  .el-message {
    margin-top: 200px !important;
  }
</style>